<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test-fill{
            color: #fff;
            width: 5em;
            height: 5em;
            margin: 5em;
            padding: 1em;
            text-align: center;
            background: #3498db;
            transform: rotate(-45deg);
        }
        .test-fill.none:hover{
            animation: test-rotate 1s;
        }
        .test-fill.backwards:hover{
            animation: test-rotate 1s backwards;
        }
        .test-fill.forwards:hover{
            animation: test-rotate 1s forwards;
        }
        .test-fill.both:hover{
            animation: test-rotate 1s forwards;
        }

        @keyframes test-rotate{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(90deg);
            }
        }
    </style>
</head>
<body>
<div class="test-fill none">none</div>
<div class="test-fill backwards">backwards</div>
<div class="test-fill forwards">forwards</div>
<div class="test-fill both">both</div>
</body>
</html>